<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-11 21:41:13
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-26 23:00:55
 * @FilePath: /chat-ai-plus/src/components/Conversation/MessageUser.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="message-container reverse" >
    <div class="stance">
      
    </div>
    <div class="content">
      <div class="message" >
  
        <div>
          <template  v-for="(item, index) in data.fileList">
            <u-image
            v-if="item.type == 0"
            :key="index"
            :show-loading="true"
            :src="item.fileUrl"
            @click="click"
          ></u-image>
          </template>

         
        </div>


        <div>{{ data.context }}</div>
      </div>
    </div>
    <div class="stance">
      <u-avatar
        src=""
        fontSize="22"
      ></u-avatar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MessageUser',
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  setup() {
  
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.message-container {
  display: flex;
  align-items: flex-start;
  gap: $space;
  & + .message-container {
    margin-top: $space;
  }


  @media screen and (max-width: 576px) {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: map-get($spaces, xs)
  }

  &.reverse {
    // flex-direction: row-reverse;
    .content {
      justify-content: flex-end;
    }

    .message {
      display: inline-block;
      width: unset;
      border-radius: $radius;
      border-top-right-radius: unset;
      background: map-get($theme-colors, primary);
      color: $white-color;
      white-space: pre-wrap; /* 换行 */
  word-wrap: break-word; /* 单词换行 */
  word-break:break-all;
    }
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  .message {
    display: block;
    width: 100%;
    background: $white-color;
    color: $black-color;
    padding: map-get($spaces, sm);
    border-radius: $radius;
    border-top-left-radius: unset;
  }
  .stance {
    width: 40px;
  }
}
</style>
